<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="static/css/reset.css">
    <link rel="stylesheet" href="static/css/atom.css">
    <link rel="stylesheet" href="static/css/global.css">
    <link rel="stylesheet" href="static/css/open.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <link rel="stylesheet/less" href="./element-ui_less.less">
    <title>开宝箱抽奖</title>
</head>

<body ontouchstart="" class="open-body">
    <div class="wrapper">
        <div class="bg rotate"></div>
        <div class="open-has " id="app">
            <h3 class="title-close">恭喜您获得<span class="user">2025跨年</span>宝箱</h3>
            <h3 class="title-open" id="title">恭喜您，<br>成功领取<span class="user">跨年宝箱</span>中的加油卡</h3>
            <div class="mod-chest">
                <div class="chest-close show">
                    <div class="gift"></div>
                    <div class="tips"><i class="arrow"></i></div>
                </div>
                <div class="chest-open">
                    <div class="mod-chest-cont open-cont">
                        <div class="content">
                            <div class="gift">
                                <div class="icon"><img id="picture"
                                        src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d6m62phnpemh1zm9jsbna.png">
                                </div>
                            </div>
                            <div class="func">
                                <div>
                                    <button class="chest-btn" @click="use" id="test">点击收下</button>
                                    <button class="chest-btn" @click="gotouse" id="use">前往查看</a>
                                </div>

                                <el-dialog class="dialog" v-model="dialogVisible" append-to-body>
                                    <div class="dialog-header-1"></div>
                                    <div class="dialog-header-2"></div>
                                    <el-table :data="tableData" :cell-style="{ textAlign: 'center' }"
                                        :row-class-name="rowClassName" style="width: 80%; margin: 0 auto;"
                                        highlight-current-row>
                                        <el-table-column prop="name">
                                            <template #default="scope">
                                                <div @click="handleClick(scope.row)"><b>{{ scope.row.name }}<b></div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="tip">*注：只针对还未到期的武器加油哦！<br>记得联系当地客服帮您加油</div>
                                    <div class="dialog-footer" style="text-align: center;">
                                        <el-button @click="close" class="queding"></el-button>
                                    </div>
                                </el-dialog>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="open-none" style="display:none">
            <h3>你来晚啦，下次早点吧！</h3>
            <div class="mod-chest">
                <div class="chest-open show"></div>
            </div>
            <div class="func"><button class="chest-btn">查看领取详情</button></div>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var showButton = false;
        var couponid;
        // 获取当前浏览器地址
        var url = window.location.href;

        //var url = "https://wwww.voted?token=9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs"
        // 截取 token= 后的字符串
        var token = null;
        function getToken() {
            //console.log("当前浏览器地址：" + url);
            var parts = url.split("token=");
            if (parts.length > 1) {
                token = parts[1].split("&")[0]; // 进一步截取 & 之前的字符串
            }
            token=decodeURIComponent(token);
            //console.log("token字符串:", token); // 输出 token 的值
        }
        getToken();
        // 为不同加油卡类型存储相应的图片资源
        var cardImages = {
            "七天加油卡": "https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m58i9121b9217bdf02z.png",
            "一个月加油卡": "https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6m56l6lph3121mn2aszr.png",
            "两个月加油卡": "https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6m57d2c6f3o1w1fbqg4t.png",
            "三个月加油卡": "https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m57p2bdhet2164mogj3.png",
            "未抽到": "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6pkbt1o249528nj1oip3.png",
            "重复抽取": "https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6nyotdpr7g31yt3l0936.png"
        };

        const { createApp, ref,onMounted } = Vue;
        const { ElDialog, ElTable, ElTableColumn, ElButton } = ElementPlus;
        createApp({
            components: {
                ElDialog,
                ElTable,
                ElTableColumn,
                ElButton
            },
            setup() {
                const dialogVisible = ref(false);
                const tableData = ref([
                    { name: 'AI金牛', action: '操作' },
                    { name: 'AI探牛', action: '操作' },
                    { name: '预测大师', action: '操作' },
                    { name: 'TD', action: '操作' },
                    { name: 'HC信息费', action: '操作' },
                    { name: '惊破天', action: '操作' },
                    { name: '大黄蜂', action: '操作' },
                    { name: '幻影', action: '操作' },
                    { name: '漂移', action: '操作' },
                    { name: '铁皮', action: '操作' },
                    { name: '夺宝奇兵', action: '操作' },
                    { name: 'AI机构探测神器', action: '操作' },
                    { name: '大财神', action: '操作' },
                    { name: '云版静态软件', action: '操作' },
                    { name: 'HC其他指标', action: '操作' },
                    { name: '我再想想（联系当地客服确认）', action: '操作' },
                ]);
                let selectedRow = ref(null); // 存储选中的行数据
                const handleClick = (row) => {
                    selectedRow.value = row; // 将点击的行数据存储在 selectedRow 中
                    //console.log(`${row.name}`+"----------------");
                    //console.log(selectedRow.value.name);
                    if(!selectedRow.value.name){
                        alert("请再次点击要加油的武器");
                    }
                };
                const suiji = () => {
                    // 检查用户的号码是否在列表中
                    var apiUrl = "https://api.homilychart.com/coupon/api/coupon_backend/is-eligible-user";
                    axios.post(apiUrl,
                        { "couponIds": [1861, 1862, 1863, 1864] }
                        , {
                            headers: {
                                'token': `${token}`
                            }
                        })
                        .then(function (response) {
                            if (response.data.code === 200) {
                                var u = document.getElementById('use');
                                u.style.display = 'none';// 隐藏选择的元素
                                showButton = true;
                                // 生成 0 到 1 之间的随机数
                                var random = Math.random();
                                var cardType;
                                // var couponid;
                                // 判断随机数所在范围，确定加油卡类型
                                if (random < 0.7) {
                                    cardType = "一个月加油卡";
                                    couponid = 1862;
                                } else if (random >= 0.7 && random < 0.8) {
                                    cardType = "七天加油卡";
                                    couponid = 1861;
                                } else if (random >= 0.8 && random < 0.9) {
                                    cardType = "两个月加油卡";
                                    couponid = 1863;
                                } else {
                                    cardType = "三个月加油卡";
                                    couponid = 1864;
                                }
                                // 获取对应加油卡类型的图片
                                var cardImage = cardImages[cardType];
                                // 找到页面上显示加油卡图片的元素将图片元素的 src 属性修改为对应加油卡类型的图片
                                document.getElementById("picture").src = cardImage;
                                if (cardImage) {
                                    console.log("图片元素已找到");
                                } else {
                                    console.error("未找到图片元素");
                                }
                                // 这里可以添加显示相应加油卡的逻辑，例如将信息显示在页面上
                                //console.log("您获得了：" + cardType + couponid);
                                // alert("您获得了：" + cardType);
                                // 这里添加 axios 请求代码示例
                                const apiUrl = "https://api.homilychart.com/coupon/api/coupon_backend/issue-coupon-to-users";
                                axios.post(apiUrl, { couponId: couponid },
                                    {
                                        headers: {
                                            'token': `${token}`
                                        }
                                    })
                                    .catch(function (error) {
                                        console.log(error);
                                    });

                            } else if (response.data.code === 400 && response.data.message === "该用户已领取过该卡券") {
                                var t = document.getElementById('test');//选取id为test的div元素
                                t.style.display = 'none';// 隐藏选择的元素
                                var u = document.getElementById('use');//选取id为test的div元素
                                u.style.display = 'block';// 显示选择的元素
                                // 重复抽取
                                //console.log("============")
                                //console.log(response.data.code)
                                //console.log(response.data.message)
                                document.getElementById("picture").src = cardImages["重复抽取"];
                                //console.log("重复抽取");
                            } else if (response.data.code === 400 && response.data.message === "该用户不满足领取条件") {
                                var d = document.getElementById('title');//选取id为test的div元素
                                d.style.display = 'none';// 隐藏选择的元素
                                var t = document.getElementById('test');//选取id为test的div元素
                                t.style.display = 'none';// 隐藏选择的元素
                                var u = document.getElementById('use');//选取id为test的div元素
                                u.style.display = 'none';// 隐藏选择的元素
                                document.getElementById("picture").src = cardImages["未抽到"];
                                console.log("元旦快乐");
                                // alert("元旦快乐");
                            } else {
                                var d = document.getElementById('title');//选取id为test的div元素
                                d.style.display = 'none';// 隐藏选择的元素
                                var t = document.getElementById('test');//选取id为test的div元素
                                t.style.display = 'none';// 隐藏选择的元素
                                var u = document.getElementById('use');//选取id为test的div元素
                                u.style.display = 'none';// 隐藏选择的元素
                                document.getElementById("picture").src = cardImages["未抽到"];
                                console.log("元旦快乐");
                            }
                        })
                };
                const gotouse = () => {
                    //将地址中的token转码
                    token = encodeURIComponent(token);
                    window.location.href = "https://mp.homilychart.com/coupon/coupon?token=" + token;
                };
                const close = () => {
                    //console.log(couponid);

                    // 这里添加 axios 请求代码示例
                    const apiUrl = "https://api.homilychart.com/coupon/api/coupon_backend/add-record";
                    axios.post(apiUrl, {
                        "couponId": couponid,
                        "name": selectedRow.value.name
                    },
                        {
                            headers: {
                                'token': `${token}`  // 假设后端是基于 Bearer 认证方式使用 token，根据实际情况调整格式
                            },
                        })
                        .then(function (response) {
                            console.log(response.data);
                            //将地址中的token转码
                            token = encodeURIComponent(token);
                            // 在这里可以对获取到的数据进行后续处理，比如更新页面显示等
                            window.location.href = "https://web.homilychart.com/hljw/homepage?menu=999999991&token=" + token;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    dialogVisible.value = false;
                    // // 获取链接元素
                    // var link = document.getElementById('look');
                    // // 设置链接的 href 属性，将 token 添加到目标链接中
                    // link.href = "http://121.89.234.155:8806/hljw/jwcreator/homepage?token=" + token;
                };
                const chest = ref(null);
                onMounted(() => {
                    chest.value = document.querySelector('.gift');
                    if (chest.value) {
                        chest.value.addEventListener('click', suiji());
                    }
                });
                return {
                    dialogVisible,
                    tableData,
                    handleClick,
                    gotouse,
                    suiji,
                    close,
                };
            },
            methods: {
                rowClassName(row, index) {
                    return 'bg-image'; // 对 Lisa 的行应用背景图片样式
                },
                use() {
                    //console.log("点击了收下");
                    this.dialogVisible = true;
                    //console.log(this.dialogVisible);
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
    <script type="text/javascript" src="static/js/zepto.min.js"></script>
    <script
        type="text/javascript">$(".chest-close").click(function () { $(this).addClass("shake"); var that = this; this.addEventListener("webkitAnimationEnd", function () { $(that).closest(".open-has").addClass("opened"); setTimeout(function () { $(that).removeClass("show"); $(that).closest(".mod-chest").find(".chest-open").addClass("show"); setTimeout(function () { $(".chest-open").addClass("blur"); }, 500) }, 200) }, false) });</script>
</body>

</html>
<style>
    /* 针对电脑屏幕的默认样式 */
    /* 选中某行时的背景色*/
    .el-table__body tr.current-row>td {
        color: white;
        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6mhi6phn0x6231zklia7.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .dialog {
        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6mfo5rm5znl245g0eghr.png'), url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6h1ljwbq823ltfsecq.png');
        background-size: 100% 100%;
        background-position: center;
        --el-dialog-bg-color: transparent;
        --el-dialog-border-color: transparent;
        width: 21%;
        height: 120%;
    }

    .el-dialog__headerbtn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        font-size: var(--el-message-close-size, 26px);
        height: 48px;
        outline: none;
        padding: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;
        margin-top: 27%;
        margin-right: 10%;
    }

    .dialog-header-1 {
        width: 48%;
        height: 70px;
        margin: 0 auto;
        margin-top: 10%;
        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6masa3xhgt222sdei8jt.png');
        background-size: 100% 100%;
        background-position: center;
    }

    .dialog-header-2 {
        width: 130%;
        height: 90px;
        margin: 0 -15%;
        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6matlbu84iz221znbk2l.png');
        background-size: 100% 100%;
        background-position: center;
    }

    .bg-image {
        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6m94uiqypdo1we53k02e.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .tip {
        width: 65%;
        margin: auto;
        text-align: center;
        color: white;
    }

    .queding {
        width: 30%;
        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6mfsofztcdp21n8dj7qd.png');
        background-size: 100% 100%;
        background-position: center;
    }

    .el-table {
        --el-table-border-color: transparent;
        --el-table-border: none;
        --el-table-text-color: red;
        --el-table-header-text-color: #bdbdbe;
        --el-table-row-hover-bg-color: transparent;
        --el-table-current-row-bg-color: transparent;
        --el-table-header-bg-color: transparent;
        --el-table-bg-color: transparent;
        --el-table-tr-bg-color: transparent;
        --el-table-expanded-cell-bg-color: transparent;

    }

    .el-table__body {
        border-spacing: 0px 6px !important;
    }

    /* 媒体查询：当屏幕宽度小于等于 768px 时，适用于手机屏幕 */
    @media screen and (max-width: 768px) {


        /* 选中某行时的背景色*/
        .el-table__body tr.current-row>td {
            color: white;
            background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6mhi6phn0x6231zklia7.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .dialog {
            background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6mfo5rm5znl245g0eghr.png'), url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6h1ljwbq823ltfsecq.png');
            background-size: 100% 100%;
            background-position: center;
            --el-dialog-bg-color: transparent;
            --el-dialog-border-color: transparent;
            width: 80%;
            height: 1100px;
        }

        .el-dialog__headerbtn {
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: var(--el-message-close-size, 26px);
            height: 48px;
            outline: none;
            padding: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 48px;
            margin-top: 25%;
            margin-right: 10%;
        }

        .dialog-header-1 {
            width: 50%;
            height: 50px;
            margin: 0 auto;
            margin-top: 15%;
            background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6masa3xhgt222sdei8jt.png');
            background-size: 100% 100%;
            background-position: center;
        }

        .dialog-header-2 {
            /* width: 20%;
                height: 100%; */
            margin: 0 -15%;
            background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6matlbu84iz221znbk2l.png');
            background-size: 100% 100%;
            background-position: center;
        }

        .bg-image {
            background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6m94uiqypdo1we53k02e.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .tip {
            width: 65%;
            margin: auto;
            text-align: center;
            color: white;
        }

        .queding {
            width: 30%;
            background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6mfsofztcdp21n8dj7qd.png');
            background-size: 100% 100%;
            background-position: center;
        }

        .el-table {
            --el-table-border-color: transparent;
            --el-table-border: none;
            --el-table-text-color: red;
            --el-table-header-text-color: #bdbdbe;
            --el-table-row-hover-bg-color: transparent;
            --el-table-current-row-bg-color: transparent;
            --el-table-header-bg-color: transparent;
            --el-table-bg-color: transparent;
            --el-table-tr-bg-color: transparent;
            --el-table-expanded-cell-bg-color: transparent;

        }

        .el-table__body {
            border-spacing: 0px 6px !important;
        }
    }
</style>
</body>

</html>